import { useSimulationsStore } from '@app-nextmesh/store/simulations';
import { useEffect, useState } from 'react';
import NativeSelect from './NativeSelect';
import { ISelectProps } from './types';

export default function SimulationSelect(props: ISelectProps) {
  const simulations = useSimulationsStore((state) => state.simulations);
  const [value, setValue] = useState<string[]>([]);
  useEffect(() => {
    setValue([]);
    const values = props.value as string[];
    setValue(values);
  }, [props.value]);
  const handleInputChange = (value: string | number | string[]) => {
    const values = value as string[];
    props.onChange(values);
    setValue(values);
  };

  const options =
    simulations?.map((s) => ({ label: s.name, value: s.uuid })) || [];

  return (
    <NativeSelect
      value={value}
      onChange={(value) => handleInputChange(value)}
      options={options}
      disabled={props.disabled}
    />
  );
}
